<template>
  <Dialog v-if="visible" :title="title" :visible.sync="visible" :reveal="false" class="two-columns" @close="close">
    <!-- 查看记录 -->
    <UserInfo :info-id="customerId" />
    <el-row style="display:flex">
      <el-row style="width:60%">
        <el-row>
          <el-col>就诊类型： {{ recordData.remedyType }}</el-col>
          <el-col>咨询分类： {{ recordData.consultTypeName }}</el-col>
          <el-col>主治医生：{{ recordData.attendingDoctor }}</el-col>
          <div>意向项目</div>
          <el-col v-if="!recordData.sbDtos">暂无意向项目</el-col>
          <el-col v-for="(item,i) in recordData.sbDtos" v-else :key="i">{{ item.intentionProject }}</el-col>
          <!-- <el-col>咨询编号： {{ recordData.advisoryCode }}</el-col> -->
        </el-row>
        <el-row />
      </el-row>
      <el-row style="width:40%">
        <el-col>需求1： {{ recordData.demandDtos[0]&&recordData.demandDtos[0].projectName?recordData.demandDtos[0].projectName:'无' }}</el-col>
        <el-col>需求2： {{ recordData.demandDtos[1]&&recordData.demandDtos[1].projectName?recordData.demandDtos[1].projectName:'无' }}</el-col>
        <el-col>需求3： {{ recordData.demandDtos[2]&&recordData.demandDtos[2].projectName?recordData.demandDtos[2].projectName:'无' }}</el-col>
        <div>意向项目</div>
        <el-col v-if="!recordData.sbDtos">暂无意向项目</el-col>
        <el-col v-for="(item,i) in recordData.sbDtos" v-else :key="i">{{ item.intentionProject }}</el-col>
      </el-row>
    </el-row>
    <el-row>
      <el-col>
        咨询情况：
        <div class="editor box" style="margin: -50px 0 0 70px;">
          <editor-content id="ditor" class="editor__content" :editor="editor" />
        </div>
      </el-col>
      <el-col>
        附件资料：
        <div style="margin: -35px 0 0 70px;">
          <div>
            <span>图片1</span>
            <el-button type="text">查看</el-button>
          </div>
          <div>
            <span>图片1</span>
            <el-button type="text">查看</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12">医生意见：{{ recordData.opinion }}</el-col>
      <el-col :span="12">面诊医生：{{ recordData.faceDoctor }}</el-col>
      <!-- <el-col>归档状态：{{ recordData.returnToFile }}</el-col> -->
      <el-col :span="12">咨询结果：{{ recordData.result }}</el-col>
      <el-col v-if="recordData.result !== '成交'" :span="12">不成交原因：{{ recordData.loseReason }}</el-col>

      <!-- <el-col>咨询师： {{ recordData.consultantName }}</el-col>
      <el-col>咨询时间： {{ recordData.advisoryTime }}</el-col> -->
    </el-row>

    <!-- <el-row class="butl">
      <el-button
        class="submitButton"
        plain
        :disabled="l"
        @click="handleChange('previous')"
      >上一条</el-button>
      <el-button
        class="submitButtons"
        plain
        :disabled="r"
        @click="handleChange('next')"
      >下一条</el-button>
    </el-row> -->
    <div class="footer-display">
      <span class="margin-right">咨询编号：{{ recordData.advisoryCode }}</span>
      <span class="margin-right">咨询师：{{ recordData.consultantName }}</span>
      <span class="margin-right">咨询时间：{{ recordData.advisoryTime }}</span>
      <span>归档状态：{{ recordData.returnToFile }}</span>
    </div>
  </Dialog>
</template>
<script>
import { Editor, EditorContent } from "tiptap";
import Dialog from "@/components/Dialog";
import UserInfo from "@/components/UserInformation";
// import Demand from "@/components/Demand";
export default {
  components: {
    Dialog,
    UserInfo,
    // Demand,
    EditorContent,
  },
  props: {
    recordId: {
      type: [Number, String],
      default: "",
    },
    idList: {
      type: Array,
      default: () => {
        [];
      },
    },
  },
  data() {
    return {
      title: "咨询记录",
      reveal: false,
      recordData: {},
      l: false,
      r: false,
      id: 0,
      newrecordId: "",
      visible: false,
      editor: null,
      customerId: "",
    };
  },
  watch: {
    recordId: {
      handler(newId) {
        // this.handleChange();
        // this.fetchDetails(newId);
      },
      deep: true,
    },
  },
  mounted() {
    // console.log(this.idList, "jdsfhisdfn数据数据");
  },
  methods: {
    loadDepDatas(id) {
      this.newrecordId = id;
      this.fetchDetails(id);
    },
    loadDetails(row, id) {
      if (id) {
        this.visible = true;
        this.loadDepDatas(id);
        this.customerId = row.customerId;
      } else {
        this.$message.error("选择的数据不存在咨询信息");
      }
    },
    handleChange(status) {
      // 点击上一条或者下一条
      if (this.editor) {
        this.editor.destroy();
      }
      this.idList.some((data, index) => {
        if (data.id === this.newrecordId) {
          this.id = index;
        }
      });
      this.id === 0 ? (this.l = true) : (this.l = false);
      this.id === this.idList.length - 1 ? (this.r = true) : (this.r = false);
      status === "next" ? this.id++ : this.id--;
      this.newrecordId = this.idList[this.id].id;
      this.customerId = this.idList[this.id].customerId;
      // console.log(this.idList[this.id], this.newrecordId, this.customerId, "上下一条");
      this.fetchDetails(this.newrecordId);
    },
    close() {
      this.visible = false;
      this.$emit("seeDetails", false);
      if (this.editor) {
        this.editor.destroy();
      }
    },
    fetchDetails(ids) {
      // 获取详情
      if (ids) {
        this.$api["doctor/consulting/advisoryList"]({ id: ids }).then((res) => {
          if (res.code !== 200) return this.$msg.error("查询咨询记录失败");
          this.recordData = res.data;
          this.editor = new Editor({
            content: this.recordData.advisoryInfo,
          });
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.buttons {
  width: 100%;
  height: 40px;
}
.el-row {
  display: flex;
  line-height: 10px;
  margin: 30px 0;
}

.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC;
  border-radius: 4px;
  border: none;
  color:#fff;
}
.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC !important;
  border-radius: 4px !important;
  color:#fff !important;
}
.submitButton:hover{
  background: #4791d1 !important;
}
.submitButtons{
  background: #EFF3FB !important;
  color: #0278DC !important;
}
.submitButtons:hover{
  background: #46a6ff !important;
  color: #fff !important;
}
.butl{
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 30px;
  .submitButton{
    // margin-right: 45px;
  }
  .submitButtons{
    // margin-left: 45px;
  }
}
.el-row{
    display: block;
    line-height: 35px;
    margin: 0;
}
.el-dialog__footer{
  padding: 0 !important;
}
.footer-display{
  border-top: 1px solid;
  margin-bottom: 21px;
  line-height: 30px;
}
.margin-right{
    margin-right: 45px;
  }
</style>
